<template>
    <div>
        <div class="recommend category-style" >
            <div class="middleAdvs">
                <div class="middleAdvs-item">
                    <img src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/c20ef8ed6ead1d90d4e307262b6bd543.jpg">
                </div>
                <router-link to="/integralIndex" class="middleAdvs-item">
                    <img src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/895da5715fef9dbe239ffc7c81a2c671.jpg">
                </router-link>
                <router-link to="/HomeDelivery" class="middleAdvs-item">
                    <img src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/91ce6f8e923e8361eba4a9b35c52bae1.jpg">
                </router-link>
                <router-link to="/HomeLogin" class="middleAdvs-item">
                    <img src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/5a1fed659d8a6855e522c36af56575e2.jpg">
                </router-link>
            </div>
            <div class="recommendAdvs category-style">
                <div class="recommendAdvs-item category-style" v-for="(item,index) in recommendAdvs" :key="index">
                    <router-link to='/productDetail'>
                        <img :src="item.pic">
                    </router-link>
                </div>
            </div>
            <div class="recommendActivitys category-style">
                <div class="title">
                    <span class="title-style">{{recommendActivitys.title}}</span>
                </div>
                <div class="swiper-container" id="recommendActivitys-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in recommendActivitys.items" :key="index">
                            <router-link to="/productDetail">
                                <img :src="item.pic">
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flashSale category-style">
                <div class="flashSale-time">
                    <img src="../../static/img1/icon-index-flash.png">
                    <div class="flashSale-time-content">
                        <router-link to="/productDetail">
                            <img src="../../static/img1/icon-flash-sale.png">
                        </router-link>
                        <p>距离秒杀结束</p>
                        <p>{{flashSale.endTime}}</p>
                        <p>还有
                            <span>{{timeExp}}</span>
                        </p>
                    </div>
                </div>
                <div class="flashSale-swiper">
                    <div class="swiper-container" id="flashSale-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in flashSale.products" :key="index">
                                <figure>
                                    <img :src="item.pic">
                                    <figcaption>
                                        <h2>{{item.name}}</h2>
                                        <span class="redPrice">{{item.salesPrice}}</span>
                                        <b class="grayPrice">{{item.marketPrice}}</b>
                                        <img @click="add(item)" src="../../static/img/icon-add-to-cart-green.png">
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="promotions">
                <div class="title">
                    <span class="title-style">本周卖得最好的十款零食</span>
                </div>
                <div class="promotions-content" v-for="(item, index) in promotions" :key="index">
                    <router-link to="/productDetail">
                        <img :src="item.pic">
                    </router-link>
                </div>
            </div>
            <div class="articles">
                <div class="title">
                    <span class="title-style">编辑精选</span>
                </div>
                <div class="articles-item" v-for="(item, index) in articles" :key="index">
                    <router-link to="/productDetail">
                        <img :src="item.pic">
                    </router-link>
                    <div class="articles-item-title">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="articles-item-content">
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </div>
            <div class="floors" v-for="(item, index) in floors" :key="index">
                <div class="title">
                    <span class="title-style">{{item.title}}</span>
                </div>
                <div class="floors-content">
                    <figure v-for="(val, index) in item.products" :key="index">
                        <router-link :to="{path:'/productDetail', query:{data:val}}">
                            <img :src="val.pic" class="img1">
                        </router-link>
                        <figcaption>
                            <p>{{val.alias}}</p>
                            <h2>{{val.name}}</h2>
                            <span class="redPrice">{{val.salesPrice}}</span>
                            <b class="grayPrice">{{val.marketPrice}}</b>
                            <img @click="add(val)" src="../../static/img/icon-add-to-cart-green.png">
                        </figcaption>
                        <div class="figure-tag">
                            <img :src="val.tags[0].pic" v-if="val.tags.length>0">
                        </div>
                    </figure>
                </div>
            </div>
        </div>     
    </div>
</template>

<script>
export default {
    data() {
        return {
            middleAdvs: [],
            recommendAdvs: [],
            recommendActivitys: [],
            flashSale: {},
            promotions: [],
            articles: [],
            floors: [],
            timeExp: "",
        }
    },
    mounted() {
        fetch("../../static/data/home/recommend.json")
            .then(res => res.json())
            .then(res => {
                this.middleAdvs = res.data.recommendChannel.middleAdvs;
                this.recommendAdvs = res.data.recommendChannel.recommendAdvs;
                this.recommendActivitys = res.data.recommendChannel.recommendActivitys;
                this.flashSale = res.data.recommendChannel.flashSale;
                this.promotions = res.data.recommendChannel.promotions
                this.articles = res.data.recommendChannel.articles;
                this.floors = res.data.recommendChannel.floors;

                var _this = this;
                function getRTime(_this) {
                    var EndTime = new Date(_this.flashSale.endTime);
                    var NowTime = new Date();
                    var t = EndTime.getTime() - NowTime.getTime();
                    var d = 0;
                    var h = 0;
                    var m = 0;
                    var s = 0;
                    if (t >= 0) {
                        d = Math.floor(t / 1000 / 60 / 60 / 24);
                        h = Math.floor(t / 1000 / 60 / 60 % 24);
                        m = Math.floor(t / 1000 / 60 % 60);
                        s = Math.floor(t / 1000 % 60);
                    }
                    _this.timeExp = d + "天" + h + "时" + m + "分" + s + "秒";
                }
                function _getRTime(_this) {
                    return function () {
                        getRTime(_this);
                    }
                }
                setInterval(_getRTime(_this), 1000);

                new Swiper('#flashSale-swiper', {
                    autoplay: 3000,//可选选项，自动滑动
                    // pagination: '.swiper-pagination',
                    loop: true,
                    // mousewheelControl: true,
                    observer: true,
                    observeParents: true,
                })
                new Swiper('#recommendActivitys-swiper', {
                    // observer: true,
                    // observeParents: true,
                    // slidesPerView: 'auto',
                    // centeredSlides: true,
                    // paginationClickable: true,
                    // spaceBetween: 2,
                    autoplay: 3000,//可选选项，自动滑动                 
                    loop: true,
                    observer: true,
                    observeParents: true,
                    // pagination: '.swiper-pagination',
                    slidesPerView: 1,
                    centeredSlides: true,
                    // paginationClickable: true,
                    spaceBetween: 30
                })
            });
    },
    methods: {
        add(item) {
            this.$store.commit("addProduct", item);
        },        
    },
    components: {

    },
    computed: {
        showProductSum() {
            return this.$store.getters.productSum;
        }
    }

}
</script>

<style scoped>
@import "../../static/css/base.css";
.recommend {
    font-size: 0.14rem;
    background: #F9F9F9;
    width: 100%;
}

.category-style {
    margin-top: 0.05rem;
}

.middleAdvs {
    background: #fff;
    width: 100%;
    height: 1.22rem;
    display: flex;
    justify-content: space-around;
}

.middleAdvs-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.middleAdvs-item img {
    height: 1.12rem;
}

.recommendAdvs {
    background: #F9F9F9;
    width: 100%;
    height: 2.36rem;
    display: flex;
    justify-content: space-between;
}

.recommendAdvs-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.recommendAdvs-item img {
    height: 2.36rem;
}

.recommendActivitys {
    background: #fff;
}

.title {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    position: relative;
    background: #F9F9F9;
}

.title-style {
    color: #262626;
    font-size: 0.11rem;
    margin-left: 0.2rem;
}

.title-style:after {
    content: "";
    position: absolute;
    width: 0.15rem;
    height: 0.1rem;
    background: rgb(119, 188, 31);
    left: 0rem;
    top: 0.15rem;
}

#recommendActivitys-swiper {
    width: 100%;
    height: 2.8rem;
}

#recommendActivitys-swiper img {
    height: 2.8rem;
}

#recommendActivitys-swiper .swiper-slide {
    text-align: center;
    width: 50%;
}

#recommendActivitys-swiper .swiper-slide:nth-child(2n) {
    width: 10%;
}

.flashSale {
    width: 100%;
    height: 2.24rem;
    display: flex;
    background: #fff;
}

.flashSale-time {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
}

.flashSale-time>img {
    align-self: flex-start;
    width: 0.9rem;
}

.flashSale-time-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flashSale-time-content img {
    width: 0.3rem;
}

.flashSale-time-content span {
    color: red;
}

.flashSale-swiper {
    width: 40%;
    display: flex;
    align-items: center;
}

.flashSale-swiper figure {
    width: 100%;
}

.flashSale-swiper figure>img {
    height: 1.31rem;
}

.flashSale-swiper figcaption {
    position: relative;
}

.flashSale-swiper figcaption>h2 {
    font-weight: normal;
    font-size: .12rem;
}

.flashSale-swiper figcaption>img {
    width: .22rem;
    height: .2rem;
    position: absolute;
    right: 0.3rem;
    bottom: 0;
}

.redPrice {
    color: red;
    font-size: .14rem;
}

.grayPrice {
    font-size: .1rem;
    color: gray;
    text-decoration: line-through;
    font-weight: normal;
    margin-left: .04rem;
}

.promotions {
    width: 100%;
}

.promotions-content img {
    width: 100%;
}

.articles {
    width: 100%;
}

.acticles-item {
    width: 100%;
    background: #fff;
}

.articles-item img {
    width: 5.6rem;
    height: 3.4rem;
}

.articles-item-title {
    font-size: 0.14rem;
    background: #fff;
    color: #262626;
    height: 0.25rem;
    line-height: 0.25rem;
}

.articles-item-content {
    background: #fff;
    font-size: 0.15rem;
    color: #999;
    height: 0.25rem;
    line-height: 0.25rem;
}

.floors-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #F9F9F9;
}

.floors-content figure {
    width: 2.7rem;
    margin: 0 0.1rem 0.1rem 0;
    background: #fff;
    position: relative;
}

.floors-content figure .img1 {
    width: 2.7rem;
    height: 2.7rem;
}

.floors-content figcaption {
    position: relative;
}

.floors-content figcaption>h2 {
    font-size: .15rem;
    font-weight: normal;
    color: #777;
}

.floors-content figcaption>img {
    width: .28rem;
    height: .25rem;
    position: absolute;
    right: 0.2rem;
    bottom: 0.05rem;
}

.figure-tag {
    position: absolute;
    left: 0;
    top: 0;
}
</style>  